<template>
	<div class="interpolate">
		<div class="community-input">
			<div class="community-input-seach">
				<el-input v-model="seachValue" placeholder="您可以输入标题,职位,地址搜索" @keyup.enter.native="seachClick" />
				<img src="../../assets/image/icon_home_seach.png" @click="seachClick">
			</div>
		</div>
		<div class="community-list">
			<el-container>
				<el-main @scroll="handleScroll">
					<commonInterpolate :data="communityData"></commonInterpolate>
					<div v-if="communityData.length === 0" class="no-data">
						<img src="../../assets/image/noData.png">
						<p>暂无内推</p>
					</div>
				</el-main>
				<el-aside>
					<commonNews></commonNews>
				</el-aside>
			</el-container>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import commonInterpolate from '../../component/commonInterpolate.vue'
	import commonNews from '../../component/commonNews.vue'
	
	import {
		HttpInterpolateList,
		HttpNewList
	} from '../../public/http'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	let communityData = ref([])
	let currentPage = ref(1)
	let totalPage = ref(0)
	let totalCount = ref(0)
	let seachValue = ref("")
	let isPage = ref(1)



	// 监听文章是否到底部
	const handleScroll = (e) => {
		const {
			scrollTop,
			clientHeight,
			scrollHeight
		} = e.currentTarget
		
		if (scrollTop + clientHeight >= (scrollHeight - 1) && isPage) {
			isPage.value = 0
			currentPage.value++
			communityMain(currentPage.value, true)
		}
	}
	// 文章列表
	const communityMain = (page, type) => {
		HttpInterpolateList(page, {
			key_word: seachValue.value
		}).then((res: any) => {
			if (res.code === 200) {
				if (type) {
					communityData.value = communityData.value.concat(res.data.acticleData)
				} else {
					communityData.value = res.data.acticleData
				}
				currentPage.value = parseInt(res.data.current_page)
				totalPage.value = res.data.total_page
				totalCount.value = res.data.total_count
				if (res.data.acticleData && res.data.acticleData.length == 0) {
					currentPage.value--
				}
			}
			
			setTimeout(() => {
				isPage.value = 1
			},200)

		})
	}
	
	// 搜索点击
	const seachClick = () => {
		communityMain(1)
	}
	// 分页点击
	const currentChange = (page) => {
		communityMain(page)
	}

	onMounted(() => {
		communityMain(1)
	})
</script>

<style lang="scss">
	.interpolate {
		width: 100%;
		height: calc(100%);
		overflow: hidden;
		background: #efedee;
		padding: 10px 10px 0 10px;
		box-sizing: border-box;
		
		.community-input {
			width: 100%;
			height: 50px;

			.community-input-seach {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 30%;
				height: 35px;
				background-color: #ffffff;
				border-radius: 5px;
				padding: 0 10px;
			}

			input {
				width: calc(100% - 20px);
				background-color: transparent;
				border: 0;
				color: #1e1c2a;

				&::placeholder {
					color: #9195a1;
				}
			}

			img {
				width: 20px;
				height: 20px;
				cursor: pointer;

				&:hover {
					opacity: 0.6;
				}
			}
		}

		.community-list {
			width: 100%;
			height: calc(100% - 50px);

			.el-container {
				width: 100%;
				height: 100%;
				padding: 0 0 20px 0 !important;

				.el-main {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					padding: 0 !important;
					background: transparent !important;
					
				}

				.el-aside {
					width: 300px !important;
					background: white !important;
					padding: 12px;
					box-sizing: border-box;
					border-radius: 5px;

					.community-list-title {
						font-size: 15px;
						color: rgb(145, 149, 160);
						margin-right: 30px;
						cursor: pointer;
						height: 30px;
					}

					.community-list-bottom {
						width: 100%;
						height: calc(100% - 30px);
						overflow: auto;
					}
				}
			}
		}

		.community-page {
			width: 100%;
			height: 60px;
			background: white;
			box-shadow: 0 0 10px 0 #eee;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: relative;

			.community-page-left {
				flex: 0.3;
				display: flex;
				justify-content: flex-start;
				position: absolute;
				left: 0;

				span {
					margin-right: 30px;
					font-size: 16px;
					letter-spacing: 1px;
				}
			}

			.community-page-right {
				flex: 1;
				display: flex;
				justify-content: center;

			}
		}
	}
</style>
